<template>
  <div>
    <el-table
      :data="Nav"
      style="width: 100%;"
    >
      <el-table-column
        label="name"
        width="180"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="path"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.path }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="icon"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.icon }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <el-button @click="handle(scope.row, scope.$index)">编辑</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="padding: 20px 0 0 20px">
      <el-col :span="5" style="margin: 0 10px 0 0">
        <el-input v-model="other.mailto" placeholder="请输入内容">
          <template slot="prepend">邮箱</template>
        </el-input>
      </el-col>
      <el-col :span="5">
        <el-input v-model="other.recrod" placeholder="请输入内容">
          <template slot="prepend">备案号</template>
        </el-input>
      </el-col>
    </el-row>
    <el-row style="padding: 20px 0 0 20px">
      <el-col :span="5" style="margin: 0 10px 0 0;height: 20px;display:flex;font-weight: 600;  align-items: center;color:#909399; ">
        <div>修改网站图标：</div>
        <Upload :img-url=" other.icon" @upload="imgUrlUp" />
      </el-col>
    </el-row>
    <div style="margin: 50px 0 0 20px;">
      <el-button type="success" @click="submitData">提交修改</el-button>
    </div>
    <!-- 弹出框 -->
    <el-dialog title="导航信息" :visible.sync="dialogFormVisible" @close="colses">
      <el-form :model="item">
        <el-form-item label="name" :label-width="formLabelWidth">
          <el-input v-model="item.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="path" :label-width="formLabelWidth">
          <el-input v-model="item.path" autocomplete="off" />
        </el-form-item>
        <el-form-item label="icon" :label-width="formLabelWidth">
          <el-input v-model="item.icon" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMeun, upMeun } from '@/api/meun'
import { Message } from 'element-ui'
import Upload from '@/components/uploade'
import { baseUrl } from '@/routerConfig'
export default {
  components: {
    Upload
  },
  data() {
    return {
      Nav: [],
      baseUrl,
      other: {
        _id: '',
        mailto: '',
        recrod: '',
        icon: ''
      },
      oNav: [],
      orother: {},
      dialogFormVisible: false,
      index: '',
      item: {},
      temp: {},
      isUp: false,
      isUplist: false
    }
  },
  computed: {
    navlist() {
      return this.Nav
    }
  },
  async beforeCreate() {
    const result = await getMeun()
    if (result.data instanceof Object) {
      const { Nav, _id, mailto, recrod, icon } = result.data
      this.Nav.push(...Nav)
      this.other._id = _id
      this.other.mailto = mailto
      this.other.recrod = recrod
      this.other.icon = icon
      this.orother = { ...this.other }
    } else {
      Message.error('获取导航栏信息失败')
    }
  },
  methods: {
    submit() {
      // eslint-disable-next-line no-unused-vars
      const temp = { ...this.temp }
      for (const p in temp) {
        if (temp[p] !== this.Nav[this.index][p] && this.Nav[this.index][p] !== '') {
          this.isUp = true
          this.isUplist = true
          break
        }
      }
      if (this.isUp) {
        this.Nav[this.index] = this.item
        Message.success('修改成功，需要点击提交修改')
      } else {
        Message.success('无需修改')
      }
      this.dialogFormVisible = false
    },
    handle(item, index) {
      this.item = item
      this.temp = { ...item }
      this.index = index
      this.dialogFormVisible = true
    },
    unSubimt() {
      this.Nav.splice(this.index, 1, this.temp)
    },
    colses() {
      if (!this.isUp) this.unSubimt()
      this.isUp = false
    },
    imgUrlUp(e) {
      this.other.icon = e
    },
    async submitData() {
      let isUp = false
      for (const p in this.orother) {
        if (this.orother[p] !== this.other[p]) {
          isUp = true
          break
        }
      }
      if (this.isUplist) {
        isUp = true
      }

      if (isUp) {
        const result = await upMeun({ Nav: this.Nav, ...this.other })
        if (typeof result.data === 'string') {
          Message.error(result.data)
        } else {
          Message.success('提交成功')
          this.isUplist = false
        }
      } else {
        Message.success('无需提交')
      }
    }
  }

}
</script>

<style>

</style>
